<template>
  <div>
    <el-drawer
      v-model="showSecurityIssues"
      title="密保问题"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <!-- 密保问题 -->
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="问题一">
          <el-select v-model="securityIssuesForm.question1" placeholder="请选择问题">
            <el-option
              v-for="(item, index) in questionList" 
              :key="index" 
              :label="item.title" 
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="答案">
          <el-input v-model="securityIssuesForm.answer1" placeholder="请输入答案"/>
        </el-form-item>
        <el-form-item label="问题二">
          <el-select v-model="securityIssuesForm.question2" placeholder="请选择问题">
            <el-option
              v-for="(item, index) in questionList" 
              :key="index" 
              :label="item.title" 
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="答案">
          <el-input v-model="securityIssuesForm.answer2" placeholder="请输入答案"/>
        </el-form-item>
        <el-form-item label="问题三">
          <el-select v-model="securityIssuesForm.question3" placeholder="请选择问题">
            <el-option
              v-for="(item, index) in questionList" 
              :key="index" 
              :label="item.title" 
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="答案">
          <el-input v-model="securityIssuesForm.answer3" placeholder="请输入答案"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:showDrawer'])
const showSecurityIssues = computed(()=>{return props.showDrawer})
const questionList = ref([
  { id: 1, title: '您祖母叫什么名字？'},
  { id: 2, title: '您祖父叫什么名字？'},
  { id: 3, title: '您的生日是什么时候？（例如：1980/01/01）'},
  { id: 4, title: '您母亲的名字？'},
  { id: 5, title: '您父亲的名字？'},
  { id: 5, title: '您宠物的名字叫什么？'},
  { id: 5, title: '您的车号是什么？'},
  { id: 5, title: '您的家乡是哪里？'},
  { id: 5, title: '您的小学叫什么名字？'},
  { id: 5, title: '您最喜欢的颜色？'},
  { id: 5, title: '您女儿/儿子的小名叫什么？'},
  { id: 5, title: '谁是您儿时最好的伙伴？'},
  { id: 5, title: '您最尊敬的老师的名字？'},
])

const securityIssuesForm = ref({
  question1: null,
  question2: null,
  question3: null,
  answer1: null,
  answer2: null,
  answer3: null,
})
const handleClose = () => {
  emits('update:showDrawer',false)
}
const cancelClick = () => {
  emits('update:showDrawer',false)
}
const confirmClick = () => {
  emits('update:showDrawer',false)
}
</script>
<style scoped lang='scss'>
.el-select{
  width: 100%;
}
</style>